<template>
  <div class="data-connect">
    <el-form :ref="formName" :model="ruleForm" label-width="150px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t('firm.productType') }}</span>
        </div>
        <el-row>
          <el-col>
            <el-form-item :label="$t('firm.productName')">
              <el-select v-model="ruleForm.groupCode" :placeholder="$t('firm.choose')">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item :label="$t('firm.versions')">
              <el-select v-model="ruleForm.groupCode" :placeholder="$t('firm.choose')">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t('firm.linkdb') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('firm.linkAdd')">
              <el-input v-model="ruleForm.groupCode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('firm.port')">
              <el-input v-model="ruleForm.groupCode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('firm.users')">
              <el-input v-model="ruleForm.groupCode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('firm.passWord')">
              <el-input v-model="ruleForm.groupCode" show-password />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('firm.account')">
              <el-select v-model="ruleForm.groupCode" :placeholder="$t('firm.choose')">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <div class="footer">
        <!-- <span
          :class="{
            ['connect-success']: connectSuccess,
            ['connect-fail']: !connectSuccess
          }"
        >
          连接成功!
        </span> -->
        <el-button type="primary" @click="submitForm(formName)">
          {{ $t('firm.connect') }}
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
const options = [
  {
    value: '1',
    label: '选项1'
  },
  {
    value: '2',
    label: '选项2'
  },
  {
    value: '3',
    label: '选项3'
  }
]

export default {
  data() {
    return {
      formName: 'ruleForm',
      ruleForm: {
        groupCode: '1',
        companyName: '1',
        // roleAlias: '用户类型'
        address: '1',
        addressDetial: '1'
      },
      options,
      connectSuccess: true
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';

.data-connect {
  .el-card {
    margin-bottom: 2rem;

    // >>> .el-input {
    //   max-width: 300px;
    // }
  }

  // .footer {
  //   display: flex;
  //   justify-content: space-between;
  //   .connect-success {
  //     color: $successColor;
  //   }
  //   .connect-fail {
  //     color: $errorColor;
  //   }
  // }
}
</style>
